<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>产品详情</title>
<link href="<%=basePath%>skin/css/public.css" rel="stylesheet" type="text/css" />
<link href="<%=basePath%>skin/css/detail.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=basePath%>skin/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>skin/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>skin/js/select-widget-min.js"></script>
<script type="text/javascript" src="<%=basePath%>skin/js/tab.js"></script>
<script type="text/javascript" src="<%=basePath%>skin/js/jquery.jqzoom.js"></script>
<script type="text/javascript" src="<%=basePath%>skin/js/base.js"></script>
<script type="text/javascript" src="<%=basePath%>skin/js/public.js"></script>
<script type="text/javascript" src="<%=basePath%>skin/js/common.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	navi()
	detailRadioToggle()

	$(".add").click(function() {
		var t = $(this).parent().find("input[class*=num_text_box]");
		t.val(parseInt(t.val()) + 1)
	})
	$(".min").click(function() {
		var t = $(this).parent().find("input[class*=num_text_box]");
		t.val(parseInt(t.val()) - 1)
		if (parseInt(t.val()) < 0) {
			t.val(0);
		}
	})

	var s = $(".suitsList").children("li").size() * 130;
	$(".suitsList").css("width", s)
	
	$("#addcart").click(function(){
		var productId = $("#productId").val();
		var num = $("#num").val();
		addCar(productId, num);
	});
});
</script> 
</head>

<body>
	<div class="detail">
    	<div class="container">
        	<div class="header-wrap">
				<c:import url="/layouts/top.jsp" />
                <c:import url="/layouts/head.jsp" />
                <div class="nav-warp">
					<div class="nav-main-warp wp">
						<div class="head-v3">
							<div class="navigation-up">
								<div class="navigation-inner">
									<div class="navigation-v3">
										<ul>
											<li class="fLeft navi_product first" _t_nav="product">
												<h2>
													<a href="<%=basePath%>shop/product/list.shtml">全部产品
														<img src="<%=basePath%>skin/images/all-product-arrow.png" />
													</a>
												</h2>
											</li>
											<li class="nav-up-selected-inpage fLeft" _t_nav="home">
												<h2>
													<a href="<%=basePath%>">美嘉商城</a>
												</h2>
											</li>
											<li class="fLeft self_community" _t_nav="community">
												<h2>
													<a href="javascript:void(0)">美嘉社区</a>
												</h2>
											</li>
											<li class="fLeft technology" _t_nav="technology">
												<h2>
													<a href="#">饲养技术</a>
												</h2>
											</li>
											<li class="fLeft server" _t_nav="server">
												<h2>
													<a href="">美嘉服务</a>
												</h2>
											</li>
											<li class="fLeft know" _t_nav="know">
												<h2>
													<a href="aboutMJ.html">了解美嘉</a>
												</h2>
											</li>
											<li class="fLeft navi_cart" _t_nav="cart">
												<h2>
													<a href="<%=basePath%>cart/list.shtml">
														<img src="<%=basePath%>skin/images/cart-icon.png" />购物车（<span id="cartnum">0</span>）
													</a>
												</h2>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="navigation-down">
								<div id="product" class="nav-down-menu menu-1"
									style="display: none;" _t_nav="product">
									<div class="navigation-down-inner">
										<c:forEach items="${productCategoryTree }" var="productCategory">
											<c:if test="${productCategory.grade == 0 }">
												<div class="navi-down-area">
													<a href="<%=basePath%>shop/product/list.shtml?productCategoryId=${productCategory.id }" class="product-cate">
														<img src="<%=basePath%>download.shtml?filepath=${productCategory.source}" />
													</a>
													<ul>
														<li><a href="<%=basePath%>shop/product/list.shtml?productCategoryId=${productCategory.id }">${productCategory.name}</a></li>
														<div class="clear"></div>
													</ul>
												</div>
											</c:if>
										</c:forEach>
									</div>
								</div>
								
								<div id="community" class="nav-down-menu menu-3" style="display: none;" _t_nav="community">
                                    <div class="navigation-down-inner">
                                    	<div class="navi-down-area-second">
                                        	<a href="<%=basePath%>forumTopic/list.shtml" class="product-cate"><img src="<%=basePath%>skin/images/mjbbs.png" /></a>
                                        </div>
                                        <div class="navi-down-area-second">
                                        	<a href="<%=basePath%>collegeTopic/list.shtml" class="product-cate"><img src="<%=basePath%>skin/images/mjschool.png" /></a>
                                        </div>
                                    </div>
                                </div>
							</div>
						</div>
					</div>
				</div>
            </div>
            <div class="content-wrap">
            	<div class="content-bg">
                    <div class="wp">
                        <div class="main_info">
                            <div class="link_navi"><a href="javascript:void(0)">所有产品</a> > ${product.name }</div>
                            <div class="main_detail_content">
                                <div class="detail_product_img">
                                    <div class="right-extra">
                                        <!--产品参数开始-->
                                        <div id="preview" class="preview spec-preview">
                                        	<c:forEach items="${product.productImages }" var="productImage" varStatus="status">
                                        		<c:if test="${status.first }">
		                                            <span class="jqzoom">
		                                                <img jqimg="<%=basePath%>download.shtml?filepath=${productImage.large }" src="<%=basePath%>download.shtml?filepath=${productImage.thumbnail }" />
		                                            </span>
	                                            </c:if>
                                            </c:forEach>
                                        </div>
                                        <!--缩图开始-->
                                        <div class="spec-scroll"> <a class="prev">&lt;</a> <a class="next">&gt;</a>
                                          <div class="items">
                                            <ul>
                                              <c:forEach items="${product.productImages }" var="productImage">
                                              	<li><img alt="${productImage.title }" bimg="<%=basePath%>download.shtml?filepath=${productImage.large }" src="<%=basePath%>download.shtml?filepath=${productImage.thumbnail }" onmousemove="preview(this);"></li>
                                              </c:forEach>
                                            </ul>
                                          </div>
                                        </div>
                                        <!--缩图结束-->
                                        <!--产品参数结束-->
                                        <div style="clear:both;height:10px;"></div>
                                    </div>               
                                </div>
                                <div class="detail_product_info_main">
                                    <ul class="main_info_form">
                                        <li class="info_main_title">${product.name }</li>
                                        <li class="info_small_title">${product.name }</li>
                                        <li class="info_price">价格：<i> ￥<fmt:formatNumber value="${product.price}" pattern="0.00"/></i></li>
                                        <li class="info_payment">运费：￥100</li>
                                        <li class="info_chose">
                                        	<i>选择重量：</i>
                                            <div class="mode-content inl-block">
                                                <div class="choosebox">
                                                    <ul class="clearfix">
                                                        <c:forEach items="${wpList }" var="weightProduct">
															<li>
                                                            	<a href="<%=basePath%>shop/product/detail.shtml?productId=${weightProduct.id }" <c:if test="${product.weight == weightProduct.weight }">class="radioToggle current"</c:if>><span class="value">${weightProduct.weight }</span></a>
															</li>
														</c:forEach>
                                                    </ul>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="info_num">
                                            购买数量：
                                                <input class="min" name="" type="button" value="-" /> 
                                                <input class="num_text_box" name="num" id="num" type="text" value="1" onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" /> 
                                                <input class="add" name="" type="button" value="+" /> 
                                            件（库存${product.stock }件）
                                        </li>
                                        <li>
                                        	<input type="hidden" name="productId" value="${product.id }" id="productId"/>
                                            <a href="javascript:void(0)" class="add_cart_btn" id="addcart"></a>
                                            <a href="javascript:addFavorite(${product.id });" class="follow-btn">关注商品</a>
                                            <div class="clear"></div>
                                        </li>
                                    </ul>
                                    <div class="area_white_arrow"></div>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>	
                </div>
                <div class="wp">    
                	<div class="detail_fitting_suit clearfix">
                        <div class="case">             	
                            <div class="title cf">
                              <ul class="title-list fr cf ">
                                <li class="on">
                                    <a href='Javascript:void(0)'>
                                        <div class="tab_main">
                                            <i>推荐配件</i>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href='Javascript:void(0)' >
                                        <div class="tab_main">
                                            <i>优惠套装</i>
                                        </div>
                                    </a>
                                </li>                        
                               <!--浮標<p></p>-->
                              </ul>
                            </div>
                            <div class="product-wrap">
                             <!--案例1-->
                                <div class="product show">
     								<div class="mc">
                                        <div class="ui-switchable-panel hide ui-switchable-panel-selected" style="display: block;">
                                            <div id="fitting-con" class="fitting-content" >
                                                <!-- <ul class="stab lh">
                                                    <li class="J_fitting_switcher  scurr" >全部搭配</li>
                                                    <li class="J_fitting_switcher " >水产(14)</li>
                                                    <li class="J_fitting_switcher " >猪饲料(1)</li>
                                                    <li class="J_fitting_switcher " >鸡饲料(9)</li>
                                                </ul> -->
                                                <div class="stabcon clearfix">
                                                    <div class="master">
                                                        <s></s>
                                                        <div class="p-img">
                                                            <a target="_blank" href="<%=basePath%>shop/product/detail.shtml?productId=${product.id }">
                                                                <img width="100" height="100" src="<%=basePath%>download.shtml?filepath=${product.thumbnail }" />
                                                            </a>
                                                        </div>
                                                        <div class="p-name">
                                                            <a target="_blank" href="<%=basePath%>shop/product/detail.shtml?productId=${product.id }">${product.name }</a>
                                                        </div>
                                                        <div class="p-price hide">
                                                            <input type="checkbox" checked="">
                                                        </div>
                                                    </div>
                                                    <div class="suits">
                                                        <ul class="suitsList" style="width:650px">
                                                        	<c:forEach items="${ppList }" var="partsProduct">
                                                            <li>
                                                                <s></s>
                                                                <div class="p-img">
                                                                    <a target="_blank" href="<%=basePath%>shop/product/detail.shtml?productId=${partsProduct.id }">
                                                                        <img width="100" height="100" src="<%=basePath%>download.shtml?filepath=${partsProduct.thumbnail }">
                                                                    </a>
                                                                </div>
                                                                <div class="p-name">
                                                                    <a title="" target="_blank" href="<%=basePath%>shop/product/detail.shtml?productId=${partsProduct.id }">${partsProduct.name }</a>
                                                                </div>
                                                                <div class="choose">
                                                                    <input type="checkbox" >
                                                                    <label class="p-price">
                                                                        <strong>￥<fmt:formatNumber value="${partsProduct.price}" pattern="0.00"/></strong>
                                                                    </label>
                                                                </div>
                                                            </li>
                                                            </c:forEach>
                                                        </ul>
                                                    </div>
                                                    <div class="infos">
                                                        <s></s>
                                                        <div class="p-name">
                                                            <span class="J_selected" href="#">已选择0个搭配</span>
                                                        </div>
                                                        <div class="p-price">
                                                            搭 配 价：
                                                            <strong class="J_cal_jp">￥1599.00</strong>
                                                        </div>
                                                        <div class="p-saving">
                                                            获得优惠：
                                                            <del class="J_cal_mp">￥200.00</del>
                                                        </div>
                                                        <div class="btns">
                                                            <a class="btn-buy" href="#">立即购买</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--案例2-->
                                <div class="product">
                                	<c:forEach items="${gpList }" var="groupProduct">
	                                    <a target="_blank" href="<%=basePath%>shop/product/detail.shtml?productId=${groupProduct.id }">
	                                        <img width="100" height="100" src="<%=basePath%>download.shtml?filepath=${groupProduct.thumbnail }" />
	                                    </a>
	                                    <a target="_blank" href="<%=basePath%>shop/product/detail.shtml?productId=${groupProduct.id }">${groupProduct.name }</a>
                                    </c:forEach>	 
                                </div>          
                            </div>
                        </div>
                    </div>  	
                	<div class="detail_content clearfix">
                        <div class="case">             	
                            <div class="title cf">
                              <ul class="title-list fr cf ">
                                <li class="on">
                                    <a href='Javascript:void(0)'>
                                        <div class="tab_main">
                                            <i>商品信息</i>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href='Javascript:void(0)' >
                                        <div class="tab_main">
                                            <i>售后保障</i>
                                        </div>
                                    </a>
                                </li>                        
                              </ul>
                            </div>
                            <div class="product-wrap">
                                <!--案例1-->
                                <div class="product show">
                                	${product.introduction }
                                </div>
                                <!--案例2-->
                                <div class="product">
                                    	暫無信息 
                                </div> 
                                <!--案例3-->               
                            </div>
                        </div>
                    </div>
                </div>
            </div>
			<c:import url="/layouts/foot.jsp" />
        </div>
    </div>
</body>
</html>
